<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Attendance check</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $(".form").submit(function() {
            var id = $("#id").val();
            if (id.length < 3) {
                $("#name-error").css("display", "block");
                alert("inline");
            } else {
                $("#name-error").css("display", "none");
            }
            return false;
        });
    });
    </script>
</head>
<body>
    <div class="wrapper wcol-3">
        <div class="header"><h3 class="center">Login</h3></div>
        <div class="content">
            <form action="" class="form">
                <div class="form__group">
                    <label for="id">Your ID</label>
                    <input type="text" class="input" id="id" name="id" />
                    <span id="name-error" style="display: none; color: red;">Error</span>
                </div>
                <div class="form__group">
                    <label for="password">Password</label>
                    <input type="password" class="input" id="password" name="password" />
                </div>
                <div class="form__group">
                    <input type="submit" class="btn col-1" id="submit" value="Enter" />
                    <a href="forgot.html" class="right">Forgot password / ID</a>
                </div>    
                <div class="clear"></div>
            </form>

            <br />
            <p class="center">If you new teacher, please contact to <a href="mailto:admin@site.com">admin@site.com</a></p>
        </div>
        <div class="footer"></div>
    </div>
</body>
</html>